<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Counter-Reset - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">counter-reset</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">O4</i></b>]<br></td>
    <td align=center><b class="alert">Other Generated<br>Content Properties</b><br></td>
</tr>
<tr>
    <td valign=top align=center><a href="content.htm">content</a><br>
    <a href="quotes.htm">quotes</a><br>
    <a href="counterinc.htm">counter-increment</a><br>
    <a href="incsource.htm">include-source</a><br></td>
</tr>
<tr><td align=center colspan=2>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">none</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>All</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>All</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>NA</td></tr>
<tr><th align=left><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS2/generate.html#counters">CSS2: Sect. 12.5</a>,
        <a href="http://www.w3.org/TR/CSS21/generate.html#counters">CSS2.1: Sect 12.4</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>The 'counter-reset' property acts like a variable assignment in a
        programming language - it sets a new value for the specified
        counter whenever the current CSS selector is encountered. The
        property lists one or more counter labels, each followed by an
        optional integer reset value (default reset value is 0.)
        <br><br>

        If a counter is reset AND rendered using a single CSS selector
        (with the 'content' property and 'before:'/'after:' pseudo-elements),
        it should be reset first, then rendered. If a single CSS selector
        both increments and resets a counter, it is reset, then incremented.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">O4</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">none</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">O4</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Suppresses reseting of counters for the current selector.</dd>

<dt><b class="subheading">[identifier integer]</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">O4</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Syntax:</b> ([identifier] [integer]? )+
    <dd><b class="l3heading">Description:</b><br>
        Specifies one or more counters to reset and the values to reset each one to.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc:<br>
        <b class="selector">h1:before</b> {<br>
         <span class="property">counter-increment:</span> main-heading;<br>
         <span class="property">counter-reset:</span> sub-heading;<br>
         <span class="property">content:</span> "Section " counter(main-heading) ":" }</div>
    <dd><div class="example">In-Line: NA</div>
</dl>

<big><b class="mainheading">Notes</b></big>
<ul>
    <li>An element whose 'display' property is set to "none" <em>should not</em>
        be able to reset a counter.
    <li>An element whose 'visibility' property is set to "hidden" <em>should</em>
        be able to reset a counter.
</ul>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li>Nothing to report.
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>